<!-- 圖片上傳 -->
<template>
  <div>
    <div class="uploadImage-box">
      
      <div class="showImage_new" :key="index" v-for="(item,index) in uploadImgArr" @click="handleEnlarge(item,index)">
        <div class="uploadImg_new"  :style="{backgroundImage:'url('+item.imgUrl+')',width:width+'px',height:height+'px'}"></div>
        <div class="uploadBg_new">
          <!-- <span class="iconfont icon-shanchu" @click.stop="deleteImg(item.id)"></span> -->
          <span class="uploadBg_new_icon_x" @click.stop="deleteImg(item.id)">×</span>
        </div>
      </div>
      <div class="uploadBtn" v-if="uploadImgArr.length<9" :style="{width:width+'px',height:height+'px'}">
        <common-icon type="_shangchuan" :size="26"></common-icon>
        <p class="introText">{{introText}}</p>
        <input id="uploaderInput" class="uploader-input"
        type="file" name="files" accept="image/*" @click="clearFile" @change="uploadImage($event)" />
      </div>
    </div>
    <Alert v-if="isShowAlert" type="error" style="width: 220px;margin-top: 10px;" show-icon>图片大小不能超过8M！</Alert>
    <!-- 点击查看大图的组件 -->
    <!-- isCarousel打开，handCarousel获取关闭，imgSrc图片数组 -->
    <carousel v-if="isShowCarousel" :curIndex='curIndex' :isCarousel='isShowCarousel' @handCarousel='handCarousel' :imgSrc='imgSrc'></carousel>
  </div>
</template>

<script>
import commonIcon from "_c/common-icon/common-icon.vue"
import { upLoadImg } from "@/api/data";
import { getImgUrl } from "@/api/server-url";
import carousel from "_c/carousel/carousel.vue";
export default {
  props:{
    imgUrl:{
      type:String,
      default:''
    },
    // 必传
    uploadType:{
      type:String,
      default:'tmp'
    },
    width:{
      type:Number,
      default:180
    },
    height:{
      type:Number,
      default:120
    },
    introText:{
      type:String,
      default:''
    },
    showuploadImg: {
      type: Array,
      default: () => {
          return [];
      }
    }
  },
  data () {
    return {
      uploadImg: '',
      imgSize:1024*500,
      uploadImgArr:[],
      isShowAlert: false,
      // 放大图片的控制组件
      isShowCarousel: false,
      curIndex: 0,
      imgSrc: []
    };
  },

  methods: {
    // 放大组件的控制
    handCarousel(data) {
      // 放大关闭
      this.isShowCarousel =data;
    },
    handleEnlarge(item,index) {
      // 点击后显示当前图片，可以查看所有图片
      console.log('放大图片的点击');
      // 这里应该传入需要展示的图片的地址数组
      // this.imgSrc = [getImgUrl(imgArr[0]),getImgUrl(imgArr[1])];
      this.imgSrc = this.uploadImgArr;
      this.curIndex = index;
      console.log(this.imgSrc);
      let arr = [];
      this.imgSrc.forEach((item,index) => {
        console.log(item);
        arr.push(item.imgUrl);
      });
      this.imgSrc = arr;
      this.isShowCarousel = true;
    },
    guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
      })
    },
    deleteImg(id){
      this.uploadImgArr = this.uploadImgArr.filter(item=>{
        return item.id!=id;
      })
      this.$emit('uploadImgData',this.uploadImgArr)
      console.log(this.uploadImgArr);
    },
    clearFile(e) {
        e.target.value = '';
    },
    uploadImage(event){
      let files = event.target.files[0] || event.dataTransfer.files[0];
      let filesSize = files.size;
      if(this.uploadImgArr.length>9){return;}
      if (filesSize > this.imgSize) {
        this.isShowAlert = true;
        setTimeout(()=> {
          this.isShowAlert = false;
        }, 2000);
        return false;
      }
      let src, url = window.URL || window.webkitURL || window.mozURL;
      if (url) {
        src = url.createObjectURL(files);
      } else {
        src = event.target.result;
      }
      let formData= new FormData();
      formData.append("files",files)
      upLoadImg(formData,this.uploadType).then(res => {
        if(res.data.code==200 || res.data.code==201){
          var obj = {
              id:this.guid(),
              imgName:res.data.data.name,
              imgUrl:getImgUrl(res.data.data.name)
          }
          this.uploadImgArr.push(obj)
          return 1;
        }
      }).then(result=>{
        if(result == 1) this.$emit('uploadImgData',this.uploadImgArr);
      })
    },
  },
  computed: {
    returnUrl(){
      this.uploadImg = getImgUrl(this.imgUrl)
    }
  },

  mounted(){
    console.log(this.imgUrl)
  },
  watch:{
    showuploadImg(now,old){
      // console.log(now);
      var that = this
      this.uploadImgArr= []
      now.forEach(item => {
        var obj = {
          id: that.guid(),
          imgName: item,
          imgUrl: getImgUrl(item)
        };
        this.uploadImgArr.push(obj);
      });
      console.log('打印出来的图片数组=======',this.uploadImgArr);
    },
    returnUrl(a,b){
      console.log(a)
      console.log(b)
    }
  },
  components: {
    commonIcon,
    carousel
  },

}

</script>
 <style lang='less' >
   @import '../../less/variable.less';
    .uploadImage-box{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        &>div{
            border-radius: 5px;
            overflow: hidden;
            margin-right: 15px;
            margin-bottom: 15px;
        }
        .showImage{
            display: flex;
            position: relative;
            &:hover{
                .uploadBg{
                    display: flex;
                }
            }
            .uploadBg{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(0, 0, 0, 0.6);
                display: none;
                justify-content: center;
                align-items: center;
                .iconfont{
                    color: #ffffff;
                    font-size: 36px;
                    padding: 0 5px;
                    cursor: pointer;
                    &:hover{
                        color: @mainColor;
                    }
                }
            }
            .uploadImg{
                 background-position: center;
                 background-size: cover;
                 border: 1px dashed #e5e5e5;

                img{
                    width: 100%;
                }
            }
        }
        // 改版后的样式
        .showImage_new {
          display: flex;
          position: relative;
          overflow: visible;
          .uploadImg_new{
              background-position: center;
              background-size: cover;
              border: 1px dashed #e5e5e5;
            img{
                width: 100%;
            }
          }
          // 此时的删除图标应该定位在右上角
          .uploadBg_new {
            position: absolute;
            right: -5px;
            top: -5px;
            background-color: black;
            width: 20px;
            height: 20px;
            text-align: center;
            vertical-align: middle;
            // background: rgba(0, 0, 0, 0.6);
            color: #fff;
            border-radius: 50%;
            
            span {
              width: 20px;
              height: 20px;
              line-height: 20px;
              display: inline-block;
              font-size: 18px;
              cursor: pointer;
            }
            .icon-shanchu:before {
              display: block;
              font-size: 23px;
            }
            .uploadBg_new_icon_x {
              display: block;
              font-size: 23px;
            }
          }
        }
        .uploadBtn{
            position: relative;
            cursor: pointer;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            border: 1px dashed #e5e5e5;
            &:hover{
                border-color:@mainColor;
                .iconfont{
                    color: @mainColor;
                }
            }
            &>.iconfont {
              color: #474747;
            }
            .uploader-input{
                position: absolute;
                z-index: 2;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                cursor: pointer;
            }
        }

    }
</style>
